<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录 - BLACK SWAN</title>
    <link rel="stylesheet" href="../css/header.css">
    <link rel="stylesheet" href="../css/login.css">
</head>
<body>
    <!-- Header will be loaded here -->
    <div id="header-placeholder"></div>

    <main class="login-container">
        <div class="background-container">
            <div class="background-overlay"></div>
        </div>

        <div class="login-content">
            <div class="login-header">
                <h1>BLACK SWAN</h1>
                <p>优雅登录，尊贵体验</p>
            </div>

            <form class="login-form" id="loginForm">
                <div class="form-group">
                    <input type="text" id="username" name="username" required>
                    <label for="username">用户名</label>
                    <div class="line"></div>
                </div>

                <div class="form-group">
                    <input type="password" id="password" name="password" required>
                    <label for="password">密码</label>
                    <div class="line"></div>
                </div>

                <div class="form-options">
                    <label class="remember-me">
                        <input type="checkbox" id="remember" name="remember">
                        <span class="checkmark"></span>
                        记住我
                    </label>
                    <a href="#" class="forgot-password">忘记密码？</a>
                </div>

                <button type="submit" class="login-button">登 录</button>

                <div class="register-link">
                    还没有账号？ <a href="#">立即注册</a>
                </div>
            </form>

            <div class="social-login">
                <p>其他登录方式</p>
                <div class="social-icons">
                    <button class="social-btn wechat">
                        <span class="icon">微信</span>
                    </button>
                    <button class="social-btn weibo">
                        <span class="icon">微博</span>
                    </button>
                    <button class="social-btn qq">
                        <span class="icon">QQ</span>
                    </button>
                </div>
            </div>
        </div>
    </main>

    <script>
        // Load header
        document.addEventListener('DOMContentLoaded', function() {
            const headerPlaceholder = document.getElementById('header-placeholder');
            
            // 直接将header的HTML内容嵌入到页面中
            headerPlaceholder.innerHTML = `
                <header class="main-header">
                    <div class="header-container">
                        <div class="logo">
                            <a href="index.html">BLACK SWAN</a>
                        </div>
                        
                        <nav class="main-nav">
                            <ul class="nav-links">
                                <li><a href="#about">关于我们</a></li>
                                <li><a href="#products">产品系列</a></li>
                                <li><a href="#services">服务支持</a></li>
                                <li><a href="#contact">联系我们</a></li>
                            </ul>
                        </nav>

                        <div class="header-actions">
                            <button class="search-btn">
                                <i class="search-icon"></i>
                            </button>
                            <button class="login-btn">登录</button>
                        </div>

                        <button class="mobile-menu-btn">
                            <span></span>
                            <span></span>
                            <span></span>
                        </button>
                    </div>
                </header>
            `;
        });
    </script>
    <script src="../js/header.js"></script>
    <script src="../js/login.js"></script>
</body>
</html> 